<template>
    <div>
        <TopNav title="个人中心" />
        <!-- 上半部分 -->
        <div class="profile" @click="$router.push('/edit')">
            <img
                v-if="userInfo.head_img"
                :src="$axios.defaults.baseURL + userInfo.head_img"
                alt=""
                class="avatar"
            />
            <img v-else src="@/assets/1.jpg" alt="" class="avatar" />
            <div class="info">
                <div class="name">
                    <span
                        class="iconfont"
                        :class="{
                            iconxingbienan: userInfo.gender === 1,
                            iconxingbienv: userInfo.gender === 0,
                        }"
                    ></span>
                    {{ userInfo.nickname || userInfo.username }}
                </div>
                <div class="date">2020-12-12</div>
            </div>
            <span class="iconfont iconjiantou1"></span>
        </div>

        <!-- 下半部分 -->
        <ProfileBar
            label="我的关注"
            desc="关注的用户"
            @click.native="$router.push('/follow')"
        />
        <ProfileBar
            label="我的跟帖"
            desc="跟帖/回复"
            @click.native="$router.push('/comment')"
        />
        <ProfileBar
            label="我的收藏"
            desc="文章/视频"
            @click.native="$router.push('/star')"
        />
        <ProfileBar label="设置" @click.native="$router.push('/edit')" />
        <ProfileBar label="退出" @click.native="logout" />
    </div>
</template>

<script>
    import ProfileBar from "@/components/ProfileBar";
    import TopNav from "../../components/TopNav";
    export default {
        components: {
            ProfileBar,
            TopNav,
        },
        data() {
            return {
                userInfo: {},
            };
        },
        created() {
            // 页面创建完毕, 开始获取数据
            this.$axios({
                url: "/user/" + localStorage.getItem("userId"),
            }).then((res) => {
                console.log(res.data);
                const { message, data } = res.data;
                if (message == "获取成功") {
                    this.userInfo = data;
                }
                // else {
                //     this.$toast.fail("信息获取失败");
                //     // 知道了用户的信息是错的
                //     // 删除信息
                //     localStorage.removeItem("token");
                //     localStorage.removeItem("userId");
                //     // 跳转到登录页
                //     this.$router.replace("/login");
                // }
            });
        },
        methods: {
            logText(str) {
                console.log(str);
            },
            logout() {
                // 跳出按钮点击逻辑
                // localStorage.clear()
                localStorage.removeItem("token");
                localStorage.removeItem("userId");
                this.$toast("退出成功");
                // 跳转过后不应该可以返回到当前页面
                this.$router.replace("/login");
            },
        },
    };
</script>

<style lang="less" scoped>
    .profile {
        display: flex;
        padding: 24 /360 * 100vw 20 /360 * 100vw;
        align-items: center;
        border-bottom: 5 /360 * 100vw solid #e4e4e4;
        .avatar {
            width: 70 /360 * 100vw;
            height: 70 /360 * 100vw;
            border-radius: 50%;
        }
        .info {
            flex-grow: 1;
            padding-left: 10 /360 * 100vw;
            .name {
                .iconxingbienan {
                    color: #76baeb;
                }
                .iconxingbienv {
                    color: #f63bc0;
                }
                color: #333;
                font-size: 16 /360 * 100vw;
            }
            .date {
                font-size: 14 /360 * 100vw;
                color: #888;
                margin-top: 6 /360 * 100vw;
            }
        }
    }
</style>